<template>
  <view>
    <!-- 遮罩层 -->
    <view 
      v-if="visible" 
      class="popup-mask" 
      :class="{ 'popup-mask-show': visible }"
      @click="closeByMask"
    ></view>
    
    <!-- 弹窗内容 -->
    <view 
      v-if="visible" 
      class="popup-content" 
      :class="{ 'popup-content-show': visible }"
    >
      <view class="popup-header">
        <text class="popup-title">{{ title }}</text>
        <text class="popup-close" @click="close">×</text>
      </view>
      <view class="popup-body">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Popup",
  props: {
    // 控制弹窗显示/隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    title: {
      type: String,
      default: "弹窗标题"
    },
    // 是否可以通过点击遮罩层关闭
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    
    // 通过遮罩层关闭
    closeByMask() {
      if (this.maskClosable) {
        this.close();
      }
    }
  }
}
</script>

<style scoped>
/* 遮罩层样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.popup-mask-show {
  opacity: 1;
}

/* 弹窗内容样式 */
.popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 80%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 12rpx;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
   /* 确保在高德地图上方显示 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.popup-content-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 弹窗头部 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
  line-height: 1;
  cursor: pointer;
}

.popup-close:active {
  color: #666;
}

/* 弹窗主体内容 */
.popup-body {
  padding: 30rpx;
  max-height: 70vh;
  overflow-y: auto;
}
</style>